import { useRequest } from '@umijs/hooks';
import { Form, Input, InputNumber, message, Modal, TreeSelect, Select } from 'antd';
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { fetchRequest } from '@/utils/Request';
import { url } from '@/utils/url';
import './style.css';



//参数的类型
interface DeptInfo {
    parentID: string | undefined | null,
    deptName: string,
    orderNum: number,
    managerList: string[],
    deptID: string,
    treeID: string
}

interface ManagerInfo {
    managerID: number
    managerName: string
}


export default function ModifyDepartment(props: any) {
    const [data, setData] = useState(props)
    const [manage, setManage] = useState<ManagerInfo[]>([])

    const [form] = Form.useForm();


    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };



    const getManager = useRequest(getManageList, {
        loadingDelay: 200
    })


    //得到管理人员的list
    async function getManageList() {
        try {
            const json = await fetchRequest(url.GET_MANAGER_LIST_URL, "")
            //console.log(json)
            if (json.success) {
                // console.log(json)
                setManage(json.data)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }



    //点击修改组织信息
    async function modifyDept(params: DeptInfo) {
        try {
            // console.log(params)
            //TODO 后需要进行操作
            const json = await fetchRequest(url.MODIFY_DEPART_URL, params);
            if (json.success) {
                props.onAddSuccess();
                setData({ ...data, visible: false })
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error:any) {
            message.destroy();
            message.error(error.message)
        }
    }

    const create = useRequest(modifyDept, {
        manual: true
    })

    //点击提交的时候
    function handleFinish(values: any) {
        // console.log(values)
        // console.log(props.content)
        //TODO 后续要进行提交的网络请求
        const value = { ...values, treeID: props.content.key, deptID: props.content.deptID }
        create.run(value)
    }

    //点击确定的时候
    function handleOk() {
        form.submit()
    }

    //点击取消
    function onCancel() {
        setData({ ...data, visible: false })
    }

    //获取redux中的数据
    const deptData = useSelector((state: StoreState) => {

        const data = state.deptManage.deptData
        getSelectData(data, props.content.key)
        return data;
    })


    function getSelectData(arr: any[], key: string) {
        // const data = arr;
        disableSelect(arr, key)
    }


    //递归定义不能选择的item
    function disableSelect(arr: any[], key: string) {
        arr.map(item => {
            if (item.key.indexOf(key) !== -1) {
                item.disabled = true
            }else {
                delete item.disabled
            }

            if (typeof item.children === "undefined" || item.children === null || item.children.length === 0) {
                return;
            } else {
                disableSelect(item.children, key)
            }
        })
    }
    return (
        <Modal afterClose={props.onAddCancel} onCancel={onCancel} centered destroyOnClose visible={data.visible} title="修改组织" onOk={handleOk} okText='修改' confirmLoading={create.loading}>
            <Form  {...layout} form={form} onFinish={handleFinish} name="basic" initialValues={{ parentID: props.content.parentID, deptName: props.content.title, orderNum: props.content.order, managerList: props.content.managerList }}>


                <Form.Item name="parentID" label="上级组织" rules={[{ required: true, message: '必须选择上级组织!' }]} shouldUpdate>
                    <TreeSelect treeDefaultExpandAll className="form-item" treeData={deptData} />
                </Form.Item>


                <Form.Item name="deptName" label="组织名称" rules={[{ required: true, message: '必须输入组织名称!' }]}>
                    <Input className="form-item" />
                </Form.Item>
                <Form.Item name="orderNum" label="显示排序" rules={[{ required: true, message: '必须输入显示排序!' }]}>
                    <InputNumber className="form-item" min={1} />
                </Form.Item>
                <Form.Item name="managerList" label="组织负责人" rules={[{ required: true, message: '必须选择组织负责人!' }]}>
                    <Select mode="multiple" maxTagCount={2} filterOption={(inputValue: any, option: any) => {
                        return option.children.indexOf(inputValue) !== -1
                        // if (option.children.indexOf(inputValue) !== -1) {
                        //     return true
                        // }
                        // return false;
                    }}>{
                            manage.map((item: ManagerInfo, index: number) => <Select.Option key={index} value={item.managerID}>{item.managerName}</Select.Option>)
                        }
                    </Select>
                </Form.Item>
                {/* <Form.Item name="pDept" label="上级组织" rules={[{ required: true, message: '必须选择上级组织!' }]} shouldUpdate>
                    <TreeSelect treeDefaultExpandAll className="form-item" treeData={deptData} />
                </Form.Item>


                <Form.Item name="deptName" label="组织名称" rules={[{ required: true, message: '必须输入组织名称!' }]}>
                    <Input className="form-item" />
                </Form.Item>
                <Form.Item name="order" label="显示排序" rules={[{ required: true, message: '必须输入显示排序!' }]}>
                    <InputNumber className="form-item" min={0} />
                </Form.Item>
                <Form.Item name="leaderName" label="组织负责人" >
                    <Input className="form-item" />
                </Form.Item>
                <Form.Item name="leaderPhone" label="负责人电话" >
                    <Input className="form-item" />
                </Form.Item> */}
                {/* <Form.Item name="deptState" label="组织状态" rules={[{ required: true, message: '必须选择组织状态!' }]}  >
                    <Radio.Group>
                        <Radio value={"1"}>正常</Radio>
                        <Radio value={"2"}>停用</Radio>
                    </Radio.Group>
                </Form.Item> */}

            </Form>
        </Modal>
    )
}
